import React, { Component } from 'react'

const userInfo={
    role:1,
    name:'普通老师'
}
// 这是高阶函数，即高阶组件，插入一个组件做参数，返回一个新的组件(函数)
function ButtonHOC(WrappedComponent){
    // 声明了一个包裹参数组件的新组件；
    const ButtonWrappedComponent=class extends Component{
        constructor(props){
            super(props);
            this.handleAuth=this.handleAuth.bind(this)
            this.state={
                isAuth:false
            }
        }
        componentDidMount(){
            // console.log(ButtonWrappedComponent.displayName);
        }

        handleAuth(){
            [0, 1].includes(userInfo.role) ? console.log('已授权！') : console.log('没有授权！');
        }
// 新组件中，将参数组件渲染出来，并且通过props传入新组件中设定好的属性。
        render() {
            const { name } = this.props;

            return <WrappedComponent handleClick={this.handleAuth} name={name}/>
        }
    }
 // 展示被包裹的组件名。
//  ButtonWrappedComponent.displayName = `buttonHOC${getDisplayName(WrappedComponent)}`;

// 返回新组件
    return ButtonWrappedComponent;

}

// 获取 HOC 包住被包装组件的显示名称
// function getDisplayName(WrappedComponent) {
//     console.log(WrappedComponent.name);
//     return WrappedComponent.displayName || WrappedComponent.name || 'Component';
// }
export default ButtonHOC;